<template>
    <el-dialog :title="upload.title" :visible.sync="visible" width="400px" append-to-body :close-on-click-modal="false" :before-close="close" @close="onClose">
        <p>
            已选待检验的交易单号: {{ inspectionOrder }}
          
        </p>
        
        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls, .CSV, .docx, .doc,txt" :headers="upload.headers"
        :action="upload.url" :disabled="upload.isUploading" :on-change="handleChange"  
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag
        :data="loadFileParams">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">{{$t('formValidation.dragFilesHere')}}&nbsp;{{$t('formValidation.or')}}<em>{{$t('formValidation.clickToUpload')}}</em></div>
            <div class="el-upload__tip text-center" slot="tip">
                <!-- <div class="el-upload__tip" slot="tip">
                    <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
                </div> -->
                <span>{{$t('formValidation.onlyXlsXlsxTxt')}}</span>
                <!-- <a @click="downloadTemplate" style="font-size:12px;vertical-align: baseline;color:#1890ff">下载模板</a> -->
                <!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link> -->
            </div>
        </el-upload>
        <el-form>
            <el-form-item label="模版类型" prop="fileType">
                <el-select v-model="loadFileParams.fileType" clearable size="small">
                    <el-option v-for="item in optionList" :key="item.value"
                        :label="item.label"  :value="item.value">
                    </el-option>
                  
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close" icon="el-icon-close" size="small">{{$t('btn.cancel')}}</el-button>
            <el-button type="primary" :loading="loading" @click="submitFileForm" icon="el-icon-check" size="small">{{$t('btn.confirm')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {
    listTemplate,
    getItemsByTemplateName,
} from '@/api/inspectionManagement/inspectionManagement'
import { getToken } from '@/utils/auth'
export default {
    name: 'TemplateDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
        action: {
            type: String,
            default: null,
        },
        templateUrl: {
            type: String,
            default: null,
        },
        fileName: {
            type: String,
            default: `template_${new Date().getTime()}`,
        },
    },
    data() {
        return {
            total: 1,
            templateList: [{ templateName: 'xx模板' }],
            // 用户导入参数
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: this.$t('btn.import'),
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: 'Bearer ' + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + this.action,
            },
            loading: false,
            data: null,
            title: '',
            nodeType: this.$store.state.fmea.nodeType,
            loadFileParams:{
                fileType:"6",
                ids:""
            },
            status:"",
            inspectionOrder:"",
            optionList:[
                {
                    value:"6",label:'粘度计检测数据模版'
                } 
            ]

        }
    },
    methods: {
        /** 下载模板操作 */
        importTemplate() {
            this.download(
                'system/saas/user/importTemplate',
                {},
                `user_template_${new Date().getTime()}.xlsx`
            )
        },
        downloadTemplate() {
            console.log(window.__POWERED_BY_QIANKUN__)
            if (window.__POWERED_BY_QIANKUN__) {
                let a = document.createElement('a')
                a.href = process.env.VUE_APP_BASE_URL + this.templateUrl
                console.log(process.env.VUE_APP_BASE_URL)
                console.log(this.templateUrl)
                console.log(a.href)
                a.download = `${this.fileName}.xlsx`
                a.style.display = 'none'
                document.body.appendChild(a)
                a.click()
                a.remove()
            } else {
                console.log(2)
                let a = document.createElement('a')
                a.href = this.templateUrl
                console.log(this.templateUrl)
                a.download = `${this.fileName}.xlsx`
                a.style.display = 'none'
                document.body.appendChild(a)
                a.click()
                a.remove()
            }
        },
        // on-change
        handleChange(file){
            this.status=file.status
        },
        // 提交上传文件
        submitFileForm() {
            if(this.status){
                this.loading = true
                this.$refs.upload.submit()
            }else{
                this.$message("请先上传文件")
            }
            
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            if (response.code === 200) {
                this.loading = false
                this.upload.open = false
                this.upload.isUploading = false
                this.$refs.upload.clearFiles()
                this.$emit('callback', true)
                this.$emit('update:visible', false)
                this.$alert(response.msg, '导入结果', {
                    dangerouslyUseHTMLString: true,
                    callback: ()=>{
                      window.location.reload();
                    }
                })
            } else {
                this.loading = false
                this.$modal.msgError(response.msg)
                this.upload.open = false
                this.upload.isUploading = false
                this.$refs.upload.clearFiles()
                this.$emit('update:visible', false)
            }
        },
        // 窗口关闭
        onClose() {
            this.$emit('update:visible', false)
        },
        handleConfirm() {
            this.$emit('update:visible', false)
        },
        choose(scope) {
            console.log(scope.row.templateName)
            getItemsByTemplateName({
                templateName: scope.row.templateName,
            }).then((response) => {
                console.log(response)
            })
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible', false)
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
